import React from 'react'
import * as echarts from 'echarts'
import taiyuan from './山西省.json'

const mystyle = { height: "100%", width: "100%" }

class EchartsMap extends React.Component {

    //在挂在完后执行的方法
    componentDidMount = () => {
        let myEcharts = echarts.init(document.getElementById('myEchartsMap'))
        //注册地图
        echarts.registerMap('taiyuanMap', taiyuan)
        //绘制地图的参数
        let option = {
            title: {
                text: '太原',
                textStyle: {
                    color: '#fff'
                }
            },
            series: {
                type: 'map',
                map: 'taiyuanMap',
                zoom: 1.2,
                itemStyle: {
                    borderWidth: .4,        //区域边框的宽度
                    borderColor: '#fff',  //区域边框的颜色
                    areaColor: '#0066FF'    //区域的背景颜色
                },
                data: [{ name: '太原市', selected: true }]
            }
        }
        //绘制echarts地图
        myEcharts.setOption(option)
        myEcharts.on('click', params => {
            // console.log(params.name, params.name.substring(0, params.name.length - 1))
            this.props.onGetCodeMapMsg(params.name.substring(0, params.name.length - 1))
        })
    }

    render() {
        return (
            <div style={{ height: "100%" }}>
                <div id="myEchartsMap" style={mystyle}></div>
            </div>
        )
    }
}

export default EchartsMap